<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
<!--自动检测屏幕大小-->		
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">		
		
		<title></title>
		<link rel="stylesheet" type="text/css" href="js/bootstrap.css"/>
		<script src="js/jquery-3.2.0.min.js"></script>
		<script src="js/bootstrap.js"></script>
		
		
	</head>
	<body class="container">
		<h3 class="page-header text-center">缩略图</h3>
		
		<p>给 a 标签加 ..thumbnail 和给 img 加 img-thumbnail 效果一样<br />
			一般用在网页中鼠标悬停在图片上的效果
		</p>
		
		<div class="row">
		  	<div class="col-xs-6 col-md-3">
		    	<a href="#" class="thumbnail">
		      		<img src="img/1.jpg">
		    	</a>
			</div>
			
		  	<div class="col-xs-6 col-md-3">
		  		<a href="">
		  			<img src="img/1.jpg" class="img-thumbnail"/>
		  		</a>
			</div>
		</div>
		
		
<!--*****************************************************************-->		
		<div class="row">
		  	<div class="col-xs-6 col-md-3">
		  		<a href="">
		  			<img src="img/1.jpg" width="100%"/>
		  		</a>
			</div>
		</div>
		
		
<!--*******************************************************************-->		
		<div class="row">
		  	<div class="col-xs-6 col-md-3">
		  		<div class="thumbnail">
		  			<img src="img/1.jpg"/>
		  			<div class="caption">
		  				<h3>自定义内容</h3>
		  				<p>自定义内容自定义内容自定义内容自定义内容自定义内容</p>
		  				<button class="btn btn-primary">确定</button>
		  				<button class="btn btn-primary">返回</button>
		  			</div>
		  		</div>
			</div>
		</div>
		
	</body>
</html>
